<template>
  <div class="bookNote-list-content">
    <iv-row>
      <iv-col :xs="24" :sm="24" :md="24" :lg="17">
        <iv-form ref="registForm" :model="form" :label-width="80">
          <iv-input name='id' v-model="form.id" v-show="false"/>
          <iv-row>
            <iv-col span="5">
              <iv-formItem label="个人头像：">
                <iv-upload
                  action=""
                  :format="['jpg','jpeg','png', 'gif']"
                  :max-size="20480"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload">
                  <iv-button icon="ios-cloud-upload-outline">上传头像</iv-button>
                </iv-upload>
              </iv-formItem>
            </iv-col>
            <iv-col span="6" offset="1">
              <img class="live-cover" :src="form.headPic" style=" width:100px;height: 100px;">
            </iv-col>
            <iv-col span="5">
              <iv-formItem label="头像背景：">
                <iv-upload
                  action=""
                  :format="['jpg','jpeg','png', 'gif']"
                  :max-size="20480"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUploadBg">
                  <iv-button icon="ios-cloud-upload-outline">上传背景</iv-button>
                </iv-upload>
              </iv-formItem>
            </iv-col>
            <iv-col span="6" offset="1">
              <img class="live-cover" :src="form.background" style=" width:100px;height: 100px;">
            </iv-col>
          </iv-row>
          <iv-row>
            <iv-col>
              <iv-formItem label="名称：">
                <iv-input :maxlength="10" v-model="form.name"></iv-input>
              </iv-formItem>
            </iv-col>
          </iv-row>
          <iv-row>
            <iv-col>
              <iv-formItem label="独享首页：">
                <iv-tooltip content="登录后整个网站将只展示你自己发布的文章" placement="top">
                  <iv-switch v-model="form.articleStatus"></iv-switch>
                </iv-tooltip>
              </iv-formItem>
            </iv-col>
          </iv-row>
          <iv-row>
            <iv-col>
              <iv-formItem label="个人简介：">
                <iv-input placeholder="潇洒的描述下自己..." :maxlength="50" v-model="form.userDesc"></iv-input>
              </iv-formItem>
            </iv-col>
          </iv-row>
        </iv-form>
      </iv-col>
    </iv-row>
    <div style="margin-left: 650px;">
      <iv-button type="error" style="width: 200px" @click="saveContent">提交</iv-button>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import 'vue-nav-tabs/themes/paper.css'
  // mixin
  import {mixin} from '@/utils'
  import axios from "axios";

  export default {
    name: 'registForm',
    props: {
      userNameRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '账号不能为空', trigger: 'blur' }
          ]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      },
    },
    inject: ['reload'],
    data () {
      return {
        manager:{},
        form: {
          id:'',
          headPic: '',
          background: '',
          name:'',
          userDesc:'',
          articleStatus:false
        }
      }
    },
    mixins: [mixin],
    created () {
      // 初始化方法 判断是否登录
      this.manager = JSON.parse(sessionStorage.getItem('currentManager'))
      if (this.manager === null){
        this.$Message.warning('请登录');
        this.$router.push({path: "/login"});
      }else {
        this.form = this.manager;
        if (this.form.articleStatus === 'true'){
          this.form.articleStatus = true
        }else{
          this.form.articleStatus = false
        }
      }
    },
    computed: {

    },
    methods: {
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传格式的图片。',
        })
      },

      handleMaxSize (file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大，不能超过 20M。'
        })
      },

      handleBeforeUpload(file) {
        let formData = new FormData()
        formData.append('file', file)
        axios({
          url: this.$http.adornUrl('/oss/upload'),
          method: 'post',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'}
        }).then((data) => {
          if (data.data.status === 0) {
            if (data.data.result.msg.intranetStatus === '1'){
              this.form.headPic = data.data.result.msg.url
            }else{
              this.form.headPic = data.data.result.msg.intranetUrl
            }
            this.$Message.success('上传成功')
          }
        })
      },
      handleBeforeUploadBg(file) {
        let formData = new FormData()
        formData.append('file', file)
        axios({
          url: this.$http.adornUrl('/oss/upload'),
          method: 'post',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'}
        }).then((data) => {
          if (data.data.status === 0) {
            if (data.data.result.msg.intranetStatus === '1'){
              this.form.background = data.data.result.msg.url
            }else{
              this.form.background = data.data.result.msg.intranetUrl
            }
            this.$Message.success('上传成功')
          }
        })
      },
      saveContent(){
        if (this.form.name === null || this.form.name === '') {
          this.$Message.error('名字不能为空')
          return
        }
        let content = this.form
        let params = {
          id: this.form.id,
          name: this.form.name,
          headPic: this.form.headPic,
          background: this.form.background,
          articleStatus: this.form.articleStatus,
          userDesc: this.form.userDesc
        };
        this.$http({
          url: this.$http.adornUrl('/login/update'),
          method: 'post',
          data: this.$https.adornDatas(params)
        }).then(({data}) => {
          if (data && data.status === 0) {
            this.$Message.success('修改成功')
            // 组件中直接使用 来设置session,把用户人id存入session
            sessionStorage.setItem('currentManager',JSON.stringify(data.result.manager));
            this.reload()
            //跳到首页
            this.$router.push({ path:'/'  })
          } else {
            this.$Message.error(data.errorMsg)
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.bookNote-list-content
  width auto
  @media only screen and (max-width: 768px)
    margin 5px 5px 0 5px
  @media screen and (min-width: 768px)
    margin 10px 10px 0 10px
  @media screen and (min-width: 992px)
    margin 15px 35px 0 35px
  @media screen and (min-width: 1200px)
    width 1200px
    margin 15px auto 0
    margin-bottom 200px

  .layout-left, .layout-right
    padding 0
    @media only screen and (max-width: 768px)
      padding 0
    @media screen and (min-width: 768px)
      padding 0
    @media screen and (min-width: 992px)
      padding 0 10px
    @media screen and (min-width: 1200px)
      padding 0 10px

.iv-tag + .iv-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 20px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 80px;
  margin-left: 0px;
}
</style>
